<script setup>
import { onMounted } from "vue";
// import * as d3 from "../lib/d3.v7.min.js"
import * as d3 from "d3";
const props = defineProps(["freechild", "manid"]);

// onMounted(tagXinRen())



const writeXinRenTag = function(){
  const canvas = d3.select("#tagXinRen"+props.freechild.id);
    const svg = canvas.append("svg");
    svg.attr('width',50 )
     .attr('height',50);
    //  .attr('stroke',"black" );

    var label=""
    if( props.freechild.level == "PM"){
      label = "项"
    }else if( props.freechild.level == "PL"){
      label = "团"
    }else if(props.freechild.level == "PG"){
      label = "员"
    }else if(props.freechild.level=="SL"){
      label = "组"
    }else if(props.freechild.level=="SE"){
      label = "成"
    }else if(props.freechild.level=="新人"){
      label = "新"
    }

    svg.append("text")
      .text(label)
      .attr('x',25 )
      .attr('y',25 )
      // .attr('class',"heavy" ) //自定义css
      .attr('fill','red' )
      // .attr('stroke','black' )
      .attr('font-size',20 ) // 和class冲突的话，之前的class优先
      .attr('text-anchor',"start" ) // start 最右边，middle中间，end最左边
     
      svg.append("circle")
      .attr('cx', 35)
      .attr('cy', 19)
      .attr('r', 12)
      .attr('fill', "none")
      .attr('stroke',"red" )
      .attr('stroke-width',"2" )
}

onMounted(()=>{
 
  writeXinRenTag();
      
}) // end of onMounted

</script>


<template>
  <div class="myfree">
    <div 
    v-if="props.freechild.level!='PG' "  
    :id="'tagXinRen'+props.freechild.id" class="tagXinRen">
           
    </div>
    <el-popover popper-class="freemanpopover" placement="right" :width="500" trigger="click">
      <template #reference>
         {{ props.freechild.name }}
       
      </template>
      <el-table :data="props.freechild.history">
        <el-table-column width="50" property="projectId" label="Id" />
        <el-table-column width="150" property="projectName" label="prjName" />
        <el-table-column width="150" property="startDate" label="startDate" />
        <el-table-column width="150" property="endDate" label="endDate" />
      </el-table>
    </el-popover>
  </div>
</template>

<style>
.myfree {
  background: greenyellow;
  width:100%;
  position: relative;

}
.tagXinRen{
  position: absolute;
  top:-100%;
  left:50%;
  /* border:solid 1px black; */
  /* width:50%; */
  /* transform:translate(0,-50%); */
  display: grid;
  place-items: center;
}
.freemanpopover{
    background: blue;
}
</style>